<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>

    <!-- 1.引入样式表  注意引入的顺序 -->
    <!-- 引入样式重置表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公用样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入头部样式 -->
    <link rel="stylesheet" href="./css/header.css">
    <!-- 引入当前样式表 -->
    <link rel="stylesheet" href="./css/shopcart.css">
    <!-- 引入底部样式 -->
    <link rel="stylesheet" href="./css/bottom.css">
    <!-- 引入轮播插件样式 -->
    <link rel="stylesheet" href="./css/slider.css">
</head>

<body>
    <!-- 1.头部 -->
    <div id="header">
        <!-- 顶部 -->
        <div class="top bgc10 cbf">
            <!-- 版心 -->
            <div class="container">
                <!-- 右边的内容 -->
                <div class="fr">
                    欢迎光临<span class="cf60">乐购</span>，请
                    <a href="reg.html" class="cbf">登陆</a>
                    \
                    <a href="#" class="cf60">注册</a>
                </div>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="container rel">
            <!-- logo -->
            <img src="./img/logo.jpg" alt="" class="logo abs">

            <!-- 搜索框和购物车 -->
            <div class="ptb220 clearfix">
                <!-- 购物车 -->
                <div class="fr shopCar tcenter font16">
                    <a href="#" class="car cfff font14">购物车 <span>3</span></a>
                    <a href="#" class="c80">我的订单</a>
                </div>
                <!-- 搜索框 -->
                <form action="" class="fr search">
                    <input type="text" value="创意文具" class="fl ti5 c80">
                    <input type="submit" class="btn fl" value="">
                </form>
            </div>

            <!-- 导航栏 -->
            <ul class="nav font16 clearfix">
                <li><a href="#">图书</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">原创文学</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">运动户外</a></li>
                <li><a href="#">孕婴童</a></li>
                <li><a href="#">家居</a></li>
                <li><a href="#">创意文学</a></li>
                <li><a href="#">地方特产</a></li>
                <li><a href="#">海外购</a></li>
                <li><a href="#">电器城</a></li>
            </ul>
        </div>
    </div>

    <!-- 版心 -->
    <div class="container">
   
        <table>
            <tr class="bgcf3">
                <td width="100">
                    <input class="allSel" type="checkbox">全选
                </td>
                <td width="400">商品</td>
                <td width="100">单价</td>
                <td width="300">数量</td>
                <td width="100">小计</td>
                <td width="200">操作</td>
            </tr>
            <tr>
                <td>
                    <input class="sinSel" type="checkbox" name="1">
                </td>
                <td>
                    <img class="fl" src="./img/index08_05.jpg" alt="">
                    从你的全世界路过
                </td>
                <td class="sPrice">50.01</td>
                <td>
                    <a class="reduce" href="javascript: ">-</a>
                    <input class="proNum" type="text" value="1">
                    <a class="add" href="javascript: ">+</a>
                </td>
                <td class="singlePrice">50.01</td>
                <td>删除</td>
            </tr> 
            <tr>
                <td>
                    <input class="sinSel" type="checkbox" name="2">
                </td>
                <td>
                    <img class="fl" src="./img/index08_05.jpg" alt="">
                    从你的全世界路过
                </td>
                <td class="sPrice">50.01</td>
                <td>
                    <a class="reduce" href="javascript: ">-</a>
                    <input class="proNum" type="text" value="1">
                    <a class="add" href="javascript: ">+</a>
                </td>
                <td class="singlePrice">50.01</td>
                <td>删除</td>
            </tr> 
            <tr>
                <td>
                    <input class="sinSel" type="checkbox" name="3">
                </td>
                <td>
                    <img class="fl" src="./img/index08_05.jpg" alt="">
                    从你的全世界路过
                </td>
                <td class="sPrice">50.01</td>
                <td>
                    <a class="reduce" href="javascript: ">-</a>
                    <input class="proNum" type="text" value="1">
                    <a class="add" href="javascript: ">+</a>
                </td>
                <td class="singlePrice">50.01</td>
                <td>删除</td>
            </tr> 
            <tr>
                <td>
                    <input class="sinSel" type="checkbox" name="4">
                </td>
                <td>
                    <img class="fl" src="./img/index08_05.jpg" alt="">
                    从你的全世界路过
                </td>
                <td class="sPrice">50.01</td>
                <td>
                    <a class="reduce" href="javascript: ">-</a>
                    <input class="proNum" type="text" value="1">
                    <a class="add" href="javascript: ">+</a>
                </td>
                <td class="singlePrice">50.01</td>
                <td>删除</td>
            </tr> 
            <tr>
                <td>
                    <input class="allSel" type="checkbox">全选
                </td>
                <td colspan="2">
                    删除已选商品
                </td>
                <td>
                   已选 <span class="allNum cf60 f20">0</span> 件商品
                </td>
                <td>总价： <span class="allPrice cf60 f20">0</span></td>
                <td>结算</td>
            </tr>
    
        </table>
      


    </div>

    <!-- 9.底部 -->
    <div id="bottom">
        <div class="container">
            <div class="bottomimg ml100">
                <img src="./img/222_11.png" alt="">
                <img src="./img/222_13(1).png" alt="">
                <img src="./img/222_15.png" alt="">
                <img src="./img/222_17.png" alt="">
            </div>
            <!-- 另一栏 -->
            <div class="vtwz">
                <ul>
                    <li>
                        <a href="">
                            <div class="tcenter">
                                <dt class="font18 c3">购物指南</dt>
                                <dd class="font16">购物流程</dd>
                                <dd class="font16">发票制度</dd>
                                <dd class="font16">账户管理</dd>
                                <dd class="font16">会员优惠</dd>
                            </div>
                        </a>
                    </li>
                    <li>
                       <a href="">
                        <div class="tcenter">
                            <dt class="font18 c3">支付方式</dt>
                            <dd class="font16">货到付款</dd>
                            <dd class="font16">网上支付</dd>
                            <dd class="font16">礼品卡支付</dd>
                            <dd class="font16">银行转账</dd>
                        </div>
                       </a>
                    </li>
                    <li>
                       <a href="">
                        <div class="tcenter">
                            <dt class="font18 c3">订单服务</dt>
                            <dd class="font16">订单配送查询</dd>
                            <dd class="font16">订单状态说明</dd>
                            <dd class="font16">自助取消订单</dd>
                            <dd class="font16">自助修改订单</dd>
                        </div>
                       </a>
                    </li>
                    <li>
                       <a href="">
                        <div class="tcenter">
                            <dt class="font18 c3">退换货</dt>
                            <dd class="font16">退换货政策</dd>
                            <dd class="font16">自助申请退换货</dd>
                            <dd class="font16">退换货进度查询</dd>
                            <dd class="font16">退款方式和时间</dd>
                        </div>
                       </a>
                    </li>
                    <li>
                       <a href="">
                        <div class="tcenter">
                            <dt class="font18 c3">商家服务</dt>
                            <dd class="font16">商家中心</dd>
                            <dd class="font16">运营服务</dd>
                            <dd class="font16">加入尾浦灰</dd>
                        </div>
                       </a>
                    </li>
                </ul>
                <img src="./img/logo_00.png" alt="">
            </div>
            <div class="leavemessage font14">
                <h1>公司简介<span>|</span>Investor Relations <span>|</span>网站联盟  <span>|</span>乐购招商 <span>|</span>机构销售 <span>|</span> 官方Blog <span>|</span> 热词搜索</h1>
                <p>Copyright (c) 乐购网 2004-2016. All Rights Reserved</p>
            </div>
        </div>
    </div>

   



    <!-- 引用jq通用插件 -->
    <script src="./lib/jquery-1.11.0.js"></script>
    <!--引入轮播插件库-->
    <script src="./js/slider.js" type="text/javascript" charset="utf-8"></script>
    <!-- 首页jq用 -->
    <script src="./js/shopcart.js"></script>


</body>

</html>